<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ page 
		
		 import="javax.servlet.http.HttpSession"
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>论坛首页</title>
	<link href="image/icon.jpg" rel="icon">
	<link href="css/bootstrap.css" rel="stylesheet" >
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	
	<style type="text/css">
		.pointSpan{
			color: rgb(255, 0, 0);
		}
	</style>
	
	
</head>
<body>
	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">欢迎来到link论坛</a>
        </div>
        <c:forEach items="${boardInfo }" var="fatherBoard">
        	 <div class="navbar-header">
				<ul class="nav navbar-nav">
					<li class="dropdown">
						<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
							<b>${fatherBoard.key }</b>
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu" aria-labelledby="drop1">
							<c:forEach items="${fatherBoard.value }" var="childBoard">
								<li> <a href="#"> ${childBoard } </a> </li>
							</c:forEach>
						</ul>
					</li>
				</ul>
        	</div>
       </c:forEach>
        <div class="navbar-collapse collapse">
        <c:choose>
        	<c:when test="${userInfo!=null }">
        		<form class="navbar-form navbar-right" action="/forumweb/UserServlet?op=userLoginOut&email=${userInfo.email }&onlinetime=${userInfo.onlineTime}" method="post">
            		<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-user" style="color: black"></span>${userInfo.email },你好!</button>
            		<button type="submit" class="btn btn-success">登 出</button>
          		</form>        	
        	</c:when>
        	<c:when test="${userInfo==null }">
        		<div class="navbar-form navbar-right">
        			<button type="button" class="btn btn-success">
            			<a href="pages/user-login.jsp" style="color: white">登录</a>
            		</button>
            		<button type="button" class="btn btn-success">
            			<a href="pages/user-regist.jsp" style="color: white">注册帐号</a>
            		</button>
        		</div>
        	</c:when>
        </c:choose> 
        </div><!--/.navbar-collapse -->
      </div>
    </div>
    
    <div id="notice"><!-- notice开始 -->
    	<div  class="jumbotron" >
	    	<div class="container">
	      		<marquee behavior="ALTERNATE"><h2 style="color: red"><b>消息公告:</b></h2></marquee>
	       		<p><a href="#" style="color: blue">野生程序员的故事!</a></p>
	    	</div>
	 	</div>
      	<div class="container" style="margin-bottom: -30px">
	    	<div class="row">
	    		<button type="button" class="btn btn-primary btn-lg" onclick="sendArtice()">我要发帖</button>
				<button type="button" class="btn btn-primary btn-lg" >版主申请</button>
	    	</div>
	    	<div ><!-- 帖子标题开始 -->
	    		<table class="table table-hover">
	    			<thead>
	    				<tr>
	    					<td style="color: blue"><h3><b>帖子标题:</b></h3></td>
	    				</tr>
	    			</thead>
	    			<tbody id="articleView">
	    				<c:choose>
	    					<c:when test="${mainArticleInfo!=null }">
	    						<c:forEach items="${mainArticleInfo }" var="article">
		    						<tr>
		    							<td><a href="ArticleServlet?op=articlePage&id=${article.id }" target="_blank">${article.title }</a><span class="pointSpan">[打赏分数:${article.point }]</span></td>
		    						</tr>
	    						</c:forEach>
	    					</c:when>	    				
	    				</c:choose>	    				
	    			</tbody>
	    		</table>
	    	</div><!-- 帖子标题结尾 -->
	    	<div class = "row"><!-- 页面切换按钮组 -->
	    		<button id="frontPage" class='btn btn-primary btn-sm' style="margin-right: 6px;margin-left: 15px" onclick="changePage(this)" value="front">上一页</button>
	    		<input class='btn btn-primary btn-sm' onclick="changePage(this)" value="1" type="button"><b>. . . . .</b>
	    		<input id="button2" class='btn btn-primary btn-sm' onclick="changePage(this)" value="2" type="button">
	    		<input id="button3" class='btn btn-primary btn-sm' onclick="changePage(this)" value="3" type="button">
	    		<input id="button4" class='btn btn-primary btn-sm' onclick="changePage(this)" value="4" type="button">
	    		<% 
	    			int num = 0;
	    			String s = session.getAttribute("totalPage").toString();
	    			num = Integer.parseInt(s);
	    			 for(int i=5;i<num;i++){%>
	    				<input id="button<%= i%>" class='btn btn-primary btn-sm' onclick="changePage(this)" value="<%= i%>" type="button" style="display: none">
	    			<%} %>  	    		
	    		<!-- <input id="button5" class='btn btn-primary btn-sm' onclick="changePage(this)" value="5" type="button" style="display: none">
	    		<input id="button6" class='btn btn-primary btn-sm' onclick="changePage(this)" value="6" type="button" style="display: none"> -->
	    		<b>. . . . .</b>
	    		<input class='btn btn-primary btn-sm' onclick="changePage(this)" value="${totalPage }" type="button">
	    		<button id="nextPage" class='btn btn-primary btn-sm' style="margin-left: 6px;margin-right: 15px" onclick="changePage(this)" value="next">下一页</button>
	    		当前第<span id="curPage" style="color: blue">${curPage }</span>页 <span style="margin-left: 15px">跳转到</span>
				<input id="pointText" type="text" style="width: 40px" onkeyup="checkNum(this)" value="1">页
				<input id="pointButton" type="button" style="margin-right: 15px" class='btn btn-primary btn-sm' onclick="changePage(this)" value="确定">
				总共<span id="totalPage" style="color: blue"><b>${totalPage }</b></span>页
	    	</div>
	    	<hr>	<!-- 添加分割线换行 -->
			<footer>
				<p style="color: blue">&copy; author: Link</p>
			</footer>
    	</div><!-- 页面切换按钮组结尾 -->
    </div><!-- notice结尾 -->

    <div id="postId" class="container" style="margin-top: 100px; display: none">
    	<form class="form-horizontal" action="ArticleServlet?op=sendArticle&email=${userInfo.email }" method="post" onsubmit="return checkContent()">
    	   <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">主版块</label>
		    <div class="col-sm-5">
		  		<select id="fatherBoard" class="form-control" onchange="changeFatherBoard(this)" name="father">
		 		</select>  
		    </div>
		    <label for="inputEmail3" class="col-sm-2 control-label">悬赏分数</label>
		    <div class="col-sm-1">
		  		<select id="fatherBoard" class="form-control" name="point">
		  			<option>20</option>
		  			<option>30</option>
		  			<option>40</option>
		  			<option>50</option>
		 		</select>  
		    </div>
		  </div>
		 
		 <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">子版块</label>
		    <div class="col-sm-10">
		  		<select id="childBoard" class="form-control" name="child">
		 		</select>  
		    </div>
		  </div>
		  
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">标题</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="titleText" name="title" placeholder="title">
		    </div>
		  </div>

		 <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">内容</label>
		    <div class="col-sm-10">
		    	<script id="articleEditor" name="content" type="text/plain"></script>
		    </div>
		  </div>

		  <div class="form-group">
		  	<div class="row">
		  		<div class="col-sm-offset-2 col-sm-10">
		      		<button type="button" class="btn btn-success btn-lg" onclick="returnPage()">返回首页</button>
		      		<p style="display: inline-block;color: red;margin-left: 300px; font-size: 24px" id="prompt"></p><!-- 信息提示标签 -->
		      		<div class="pull-right" style="margin-right: 20px">
		      			<button type="submit" class="btn btn-success btn-lg">提交</button>
		      		</div>
			    </div>
		  	</div>
		  </div>
		</form>
		<hr>	<!-- 添加分割线换行 -->
		<footer>
			<p style="color: blue">&copy; author: Link</p>
		</footer>
    </div>
    
    
    <script type="text/javascript" src="js/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="js/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
    	document.getElementById("prompt").innerHTML="";//提示标签植空
    	var userEmail = '${userInfo.email}';//初始化判断userInfo是否为空
    	//console.log(document.getElementById("pointSpan").style.color);
        var ue = UE.getEditor('articleEditor',{
            toolbars: [
                       ['fullscreen', 'source', 'undo', 'redo', 'bold','snapscreen','selectall','link',]
                   ],
                   autoHeightEnabled: true,
                   autoFloatEnabled: true
               });

        function sendArtice(){//我要发帖页面切换方法
        	document.getElementById("prompt").innerHTML="";//将消息提示栏置空
        	if(userEmail == ''){
        		alert("您还没有登录,请登录!");
        	}else{
        		document.getElementById("notice").style.display="none";
        		document.getElementById("postId").style.display="";
        		var fatherBoard = document.getElementById("fatherBoard");
        		while(fatherBoard.hasChildNodes()){//清空所含元素
        			fatherBoard.removeChild(fatherBoard.firstChild);
            	}
        		var childBoard = document.getElementById("childBoard");
            	while(childBoard.hasChildNodes()){
            		childBoard.removeChild(childBoard.firstChild);
            	}
        		$.ajax({
            		url:'BoardServlet?op=loadFatherBoard',
            		type:'post',
            		success:function(data){
            			var boardJSON = JSON.parse(data);
            			for(var i = 0;i<boardJSON.length;i++){
            				var child = document.createElement("option");//创建potion标签
            				var text = document.createTextNode(boardJSON[i].name);
            				//child.value = boardJSON[i].id;
            				child.appendChild(text);//给option标签赋值
            				fatherBoard.appendChild(child);//添加到select标签下 
            				/* var child=$("<option value="+boardJSON[i].id+" name='bidPame'></option>").text(boardJSON[i].name);
            				$("#fatherBoard").append(child); */
            			}
            			changeFatherBoard();//调用更新子版块信息方法
            		}
            	});
        	}
    	}
        
        function returnPage(){//返回首页页面切换方法
        	document.getElementById("notice").style.display="";
    		document.getElementById("postId").style.display="none";
        }
        
        function changeFatherBoard(){//父板块切换后改变子版块的选项
        	var fatherBoard = document.getElementById("fatherBoard").value;
        	var childBoard = document.getElementById("childBoard");
        	while(childBoard.hasChildNodes()){
        		childBoard.removeChild(childBoard.firstChild);
        	}
        	$.ajax({
        		url:'BoardServlet?op=queryChildBoard',
        		type:'post',
        		data:{'fatherBoard':fatherBoard},
        		success:function(data){
        			var boardJSON = JSON.parse(data);
        			for(var i = 0;i<boardJSON.length;i++){
        				var child = document.createElement("option");//创建potion标签
        				//child.value = boardJSON[i].id;
        				var text = document.createTextNode(boardJSON[i].name);
        				child.appendChild(text);//给option标签赋值
        				childBoard.appendChild(child);//添加到select标签下 
        				/* var child=$("<option value="+boardJSON[i].id+" name='bidPame'></option>").text(boardJSON[i].name);
        				$("#childBoard").append(child); */
        				
        			}
        		}
        	});
        }
        
        function checkContent(){//提交前非空判断
        	var title = document.getElementById("titleText").value;
        	var content = UE.getEditor("articleEditor");
        	if(title==""){
        		document.getElementById("prompt").innerHTML="请输入标题!";
        		document.getElementById("titleText").focus();
        		return false;
        	}else if(content.getContentTxt()==""){
        		document.getElementById("prompt").innerHTML="请输入文本内容!";
        		content.focus();
        		return false;
        	}
        }
        
        /**
        	定时器
        */
       $(function(){
        	setInterval(function(){//颜色切换定时器
        		var fontColorObj = $('.pointSpan').css('color');
        		if(fontColorObj=='rgb(255, 0, 0)'){
        			$('.pointSpan').css('color','rgb(0, 0, 255)');
        		}else if(fontColorObj=='rgb(0, 0, 255)'){
        			$('.pointSpan').css('color','rgb(255, 0, 0)');
        		}
        	}, 1000); 
        });
        
        function checkNum(){	//判断页面跳转输入文本框是否为数字
        	var reg = /^\d*$/;
        	var num = arguments[0];
        	var max = parseInt($("#totalPage").text());
        	if((!reg.test(num.value))||(num.value==='NaN')||(num.value==="")){
    			num.value=1;
    		}else if(parseInt(num.value)<0){
    			num.value=1;
    		}else if(parseInt(num.value)>max){
    			num.value=max;
    		}
        }
        
        function changePage(){//页面切换方法体(分页)
        	var buttonObj = arguments[0];
        	var curPage = parseInt($("#curPage").text());//当前页数
        	var totalPage = parseInt($("#totalPage").text());//总共页数
        	if(buttonObj.value === "next"){//下一页
        		if(curPage<totalPage){
        			curPage = curPage+1;
        		}	
        	}else if(buttonObj.value === "front"){//上一页
        		if(curPage>1){
        			curPage = curPage-1;
        		}
        	}else if(buttonObj.value === "确定"){//跳转到指定页面
        		curPage = parseInt($("#pointText").val());
        	}else{//其它情况
        		curPage = parseInt(buttonObj.value);
        		if((curPage!=totalPage)&&(curPage!=1)){
        			if(((totalPage-curPage)==1)||((totalPage-curPage)==2)){//按钮显示功能切换
            			for(var i=totalPage-3;i<totalPage;i++){
            				document.getElementById("button"+i).style.display="";
            			}
            			for(var i=2;i<totalPage-3;i++){
            				document.getElementById("button"+i).style.display="none";
            			}
            		}else if(curPage!=2){
            			for(var i=curPage-1;i<curPage+2;i++){
            				document.getElementById("button"+i).style.display="";
            			}
            			for(var i=2;i<curPage-1;i++){
            				document.getElementById("button"+i).style.display="none";
            			}
            			for(var i=curPage+2;i<totalPage;i++){
            				document.getElementById("button"+i).style.display="none";
            			}
            		}
        		}
        	}
        	if(curPage!=parseInt($("#curPage").text())){//判断当前页数的值是否有发生改变
        		$.ajax({
        			url:"ArticleServlet?op=changePage",
        			type:"post",
        			data:{'curPage':curPage},
        			success:function(data){
        				var pageObj = JSON.parse(data);
        				$("#curPage").text(curPage);//设值
        				$("#articleView").empty();//清空tbody里面的元素
        				for(var i = 0;i<pageObj.length;i++){
        					var tdObj= $("<td><a href='ArticleServlet?op=articlePage&id="+pageObj[i].id+"' target='_blank'>"+pageObj[i].title+"</a><span class='pointSpan'>[打赏分数:"+pageObj[i].point+"]</span></td>");
        					var trObj = $("<tr></tr>");
        					trObj.append(tdObj);
        					$("#articleView").append(trObj);
        				}
        			}
        		});
        	}
        }
    </script>
	
</body>
</html>


















